<<<<<<< HEAD
<template>
	<view class="forum-container" style="overflow: hidden;;">

		<scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
			<view class="menu-topic-view" v-for="item in tabs" :id="'tabNum'+item.id" :key="(item.id - 1)"
				@click="swichMenu(item.id - 1)">
				<view :class="currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
					<text class="menu-topic-text">{{item.name}}</text>
					<view class="menu-topic-bottom">
						<view class="menu-topic-bottom-color"></view>
					</view>
				</view>
			</view>
		</scroll-view>

		<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
			<swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
				<scroll-view class="swiper-item" scroll-y :scroll-top="scrollTop">

					<scroll-view scroll-y class="posts-container" v-show="currentTab===0"
						@scrolltolower="onScrolltolower">
						<view style="height:80vh;">
							<div class="post" v-for="(item,index) in FuckData.slice(0, 10+endIndex)">

								<div class="main" @click="goDetails(item.id)">
									<div class="img">
										<image :src="item.pictureUrl1" alt="" mode="aspectFill" />
									</div>
									<div class="contents">
										<div class="contents-text">{{item.content}}</div>
										<div class="shop">
											<div class="img">
												<image :src="item.dish.image" alt="" />
											</div>
											<div class="shop-text">
												<div class="tag-rate">
													<div class="tag"> 菜品</div>
													<uni-rate v-model="item.dish.stars" @change="onChange" size=5vw
														class="rate" allowHalf active-color="#FF8D1A" readonly />
												</div>
												<div class="shop-name">{{item.dish.name}}</div>
											</div>
										</div>
									</div>
								</div>

								<div class="poster">
									<div class="poster-img">
										<image :src="item.user.avatar" alt="" />
									</div>

									<div class="post-message">
										<div class="poster-name">{{item.user.userName}}</div>
										<div class="time">{{item.createTime}}</div>
									</div>

									<div class="like">
										<div class="like-img">
											<image v-if="!item.liked" :src="likeImage1" alt="" @click="like(item)" />
											<image v-else="item.liked" :src="likeImage2" alt="" @click="like(item)" />
											<!-- <image src="../../static/chishenme/like.png" alt="" /> -->

										</div>
										<div class="like-text">{{item.likes}}</div>
									</div>

									<div class="comment">
										<div class="comment-img">
											<image src="../../static/chishenme/comment.png" alt="" />
										</div>
										<div class="comment-text">{{item.commentCount}}</div>
									</div>



									<div class="others">
										<div class="others-img">
											<image src="../../static/chishenme/others.png" alt="" />
										</div>
									</div>

								</div>

							</div>
							<div class="title2" v-if="FuckData.length==0">空空如也</div>
						</view>


					</scroll-view>






					<scroll-view scroll-y class="posts-container" v-show="currentTab===1"
						@scrolltolower="onScrolltolower">
						<view style="height:90vh;">
							<div class="post" v-for="(item,index) in Data.slice(0, 10+endIndex)">

								<div class="main" @click="goDetails(item.id)">
									<div class="img">
										<image :src="item.pictureUrl1" alt="" mode="aspectFill" />
									</div>
									<div class="contents">
										<div class="contents-text">{{item.content}}</div>
										<div class="shop">
											<div class="img">
												<image :src="item.dish.image" alt="" />
											</div>
											<div class="shop-text">
												<div class="tag-rate">
													<div class="tag"> 菜品</div>
													<uni-rate v-model="item.dish.stars" @change="onChange" size=5vw
														class="rate" allowHalf active-color="#FF8D1A" readonly />
												</div>
												<div class="shop-name">{{item.dish.name}}</div>
											</div>
										</div>
									</div>
								</div>

								<div class="poster">
									<div class="poster-img">
										<image :src="item.user.avatar" alt="" />
									</div>

									<div class="post-message">
										<div class="poster-name">{{item.user.userName}}</div>
										<div class="time">{{item.createTime}}</div>
									</div>

									<div class="like">
										<div class="like-img">
											<image v-if="!item.liked" :src="likeImage1" alt="" @click="like(item)" />
											<image v-else="item.liked" :src="likeImage2" alt="" @click="like(item)" />
											<!-- <image src="../../static/chishenme/like.png" alt="" /> -->

										</div>
										<div class="like-text">{{item.likes}}</div>
									</div>

									<div class="comment">
										<div class="comment-img">
											<image src="../../static/chishenme/comment.png" alt="" />
										</div>
										<div class="comment-text">{{item.commentCount}}</div>
									</div>



									<div class="others">
										<div class="others-img">
											<image src="../../static/chishenme/others.png" alt="" />
										</div>
									</div>

								</div>

							</div>
						</view>


					</scroll-view>
					<!-- <div class="title2">已加载全部内容</div> -->


				</scroll-view>
			</swiper-item>
		</swiper>




	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				pageCount: 1,
				refresherTriggered: false,
				pullingDistance: 0,
				resetting: false,
				dataList: [],
				idImgUrlMap: {},
				endIndex: 0,
				defaultAvatar: "../../static/chishenme/morentouxiang.jpg",
				page: 1,
				size: 10,
				count: 0,
				scrollTop: 50,
				showPage: false,
				value: 1,
				activeName: 'second',
				likeImage1: "../../static/chishenme/like.png",
				likeImage2: "../../static/chishenme/afterLike.png",
				swiperOption: {
					// some swiper options/callbacks
					// 所有的参数同 swiper 官方 api 参数
					// ...
				},
				followers: [{
					id: 2,
					userName: "李四",
				}],
				tabs: [{
						id: 1,
						name: '关注'
					},
					{
						id: 2,
						name: '广场'
					},
				],
				currentTab: 1,
				tabCurrent: 'tabNum2',
				// Tab切换内容
				swiperDateList: [{
						id: 1,
						content: '推荐'
					},
					{
						id: 2,
						content: '交通交通'
					},
				],
				Data: [{
					liked: false,
					id: 3,
					userId: 2,
					content: "美味小厨不错",
					pictureUrl1: "",
					likes: 0,
					restaurant: {
						restaurantId: 1,
						name: "美味小厨",
						picUrl: "https://img.zcool.cn/community/019a975cda9a6fa801208f8bf0a069.png@1280w_1l_2o_100sh.png",
						score: 8.5
					},
					dish: {
						id: 2,
						name: "孜然羊肉",
						price: 9,
						stars: 4,
						navigationUrl: "url2",
						restaurantId: 1,
						image: "https://materials.cdn.bcebos.com/images/17521900/0e57e629c85a7df8cb6ede169146f834.jpeg",
						description: "肉香四溢",
					},
					user: {
						id: 2,
						userName: "李四",
						password: "234",
						phone: "25812314725",
						gender: false,
					},
					createTime: "2024-05-08T05:16:45.000+00:00",
					updateTime: "2024-05-08T05:17:37.000+00:00",
				}],
				FuckData: []


			}
		},
		computed: {
			swiper() {
				return this.$refs.mySwiper.swiper
			},
			state() {
				if (this.resetting) {
					return "—— 已加载全部内容 ——"
				}
				if (this.refresherTriggered) {
					return "正在加载...."
				}
				if (this.pullingDistance > 45) {
					return "正在加载...."
				} else {
					return "—— 已加载全部内容 ——"
				}
			}
		},
		methods: {
			onScrolltolower() {
				this.endIndex += 10;
				console.log(5555555555555555)
			},
			formatDate(dateString) {
				const date = new Date(dateString);

				const year = date.getFullYear();
				const month = ("0" + (date.getMonth() + 1)).slice(-2);
				const day = ("0" + date.getDate()).slice(-2);
				const hours = ("0" + date.getHours()).slice(-2);
				const minutes = ("0" + date.getMinutes()).slice(-2);
				const seconds = ("0" + date.getSeconds()).slice(-2);

				const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

				return formattedDate;
			},
			fetchData(id) {
				uni.request({
					url: "http://localhost:8080/posting/getSeveral?nowCount=" + id,
					method: 'GET',
					success: (res) => {
						const userInfo = uni.getStorageSync('userInfo');
						// if(id==1){
						this.Data = res.data.data;
						// }else if(id>1){
						//    this.Data.push(...res.data.data);
						// }


						//console.log(id)
						this.Data = this.Data.map((item) => {
							if (item.pictureUrl1) {
								this.getImg(item, item.pictureUrl1, 1);
							}
							if (item.user.avatar) {
								this.getImg(item, item.user.avatar, 2);
							}
							if (!item.user.avatar) {
								item.user.avatar = this.defaultAvatar;
							}
							if (!item.pictureUrl1) {
								item.pictureUrl1 = item.dish.image;
							}
							item.createTime = this.formatDate(item.createTime);

							item.likeUser.forEach((item2) => {
								if (item2 === userInfo.data.id) {
									item.liked = true;
								}
							});
							if (item.userId) {
								const followerIds = this.followers.map((follower) => follower.id);
								if (followerIds.includes(item.userId)) {
									this.FuckData.push(item);
								}
							}
							return item;
						});
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			like(item) {

				const userInfo = uni.getStorageSync('userInfo');

				if (item.liked) { //取消点赞
					uni.request({
						url: 'http://localhost:8080/posting/' + item.id + '/deleteLike?userId=' + userInfo.data
							.id,
						method: 'POST',
						data: {},
						success: function(res) {},
						fail: function(err) {
							// 处理失败情况
							console.error(err);
							// 其他操作...
						}
					});
					item.liked = false;
					item.likes--;
				} else {
					uni.request({ //点赞
						url: 'http://localhost:8080/posting/' + item.id + '/like?userId=' + userInfo.data.id,
						method: 'POST',
						data: {},
						success: function(res) {},
						fail: function(err) {
							// 处理失败情况
							console.error(err);
							// 其他操作...
						}
					});
					item.liked = true;
					item.likes++;
				}
			},
			goDetails(id) {
				uni.navigateTo({
					url: '../postDetail/postDetail?id=' + id + ''
				})

			},
			swichMenu(id) {
				this.currentTab = id
				this.tabCurrent = 'tabNum' + id
				this.getFollowData(100);
				// console.log(this.currentTab)
			},
			swiperChange(e) {
				let index = e.detail.current
				this.swichMenu(index)

			},
			getLikesData(item) {

				const url = 'http://localhost:8080/posting/' + item.id + '/getAllPostingLiker';
				const userInfo = uni.getStorageSync('userInfo');
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						const likedObj = res.data.data.find(obj => obj.id === userInfo.data.id);
						if (likedObj) {
							item.liked = true;
						} else {
							item.liked = false;
						}
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			getFollowData(index) {
				const userInfo = uni.getStorageSync('userInfo');
				const url = 'http://localhost:8080/user/' + userInfo.data.id + '/followers';
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						if (res.data.msg == "服务器内部错误") {
							this.followers = [];
							this.fetchData(index)
							return
						}
						this.FuckData = [];
						this.followers = res.data.data;
						this.fetchData(index)
						// console.log("this.followers")
						// console.log(this.followers)
						// for (let i = 0; i < this.followers.length; i++) {
						// 	this.getAllFollowerPost(i);
						// }

					},
					fail: (err) => {
						console.error(err);
					}
				});

				// /posting/{userId}/getPostingsByUserId
			},
			getAllFollowerPost(index) {
				if (this.followers[index]) {
					uni.request({
						url: 'http://localhost:8080/posting/' + this.followers[index].id +
							'/getPostingsByUserId',
						method: 'GET',
						success: (res) => {
							for (let i = 0; i < res.data.data.length; i++) {
								this.FuckData.push(res.data.data[i])
							}
							const userInfo = uni.getStorageSync('userInfo');
							this.FuckData = this.FuckData.map((item) => {

								if (!item.user.avatar) {
									item.user.avatar = this.defaultAvatar;
								}
								if (item.pictureUrl1) {
									//console.log(555555555555555555);

									for (const id in this.idImgUrlMap) {
										if (id === item.pictureUrl1) {
											item.pictureUrl1 = this.idImgUrlMap[id];
											//console.log(item.pictureUrl1);
											break; // Stop iterating once a match is found
										}
									}

								}
								if (!item.pictureUrl1) {
									item.pictureUrl1 = item.dish.image;
								}

								item.createTime = this.formatDate(item.createTime);

								const likedUserIds = item.likeUser.map(item2 => item2 === userInfo.data
									.id);
								const liked = likedUserIds.includes(true);

								return {
									...item,
									liked
								};
							}).reverse();
							//console.log(this.FuckData)
						},
						fail: (err) => {
							console.error(err);
						}
					});
				}

			},
			getImg(item,id,index){
				 if (this.idImgUrlMap[id]) {
				      const imgUrl = this.idImgUrlMap[id];
				      if (index == 1) {
				        item.pictureUrl1 = imgUrl;
				      } else if (index == 2) {
				        item.user.avatar = imgUrl;
				      }
				      return imgUrl;
				    }
				uni.request({          //获取图片
					url: 'http://localhost:8080/image/getImage?id='+id,
					method: 'GET',
					success: res1 => {
							// console.log("根据文件地址获得的base64编码图片"); 
	
							// 将base64字符串转换为ArrayBuffer格式
					
							const arrayBuffer = uni.base64ToArrayBuffer(res1.data.data.data);
							// 将ArrayBuffer转换为Blob对象
							const blob = new Blob([arrayBuffer], { type: 'image/png' });
							// 创建Blob URL
							const imgUrl = URL.createObjectURL(blob);
							
							this.idImgUrlMap[id] = imgUrl;
							if(index==1){
								item.pictureUrl1=imgUrl;
							}else if(index==2){
								item.user.avatar=imgUrl
							}
							
							//console.log(this.idImgUrlMap)
							return imgUrl;
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
	

		},
		onLoad() {
			this.pageCount = 0;
			// this.fetchData();
			// this.getFollowData();
			// // 创建一个包装请求的函数，返回一个Promise


		},
		onReachBottom() {
			this.startIndex += 10;
			// this.pageCount++;

			// this.getFollowData(this.pageCount);
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
			this.getFollowData(100);

		},
		onShow() {
			this.getFollowData(100);
		},

	}
</script>

<style lang="scss" scoped>
	page,
	.forum-container {
		overflow-y: hidden;
		height: 100vh;
		width: 100%;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		background: #E5E5E5;

		.top-menu-view {
				display: flex;
				position: sticky;
				top: 0;
				z-index: 3;
				white-space: nowrap;
				width: 100%;
				background-color: #FFFFFF;
				height: 6.5vh;
				
				line-height: 6.5vh;
				border-bottom: 1rpx solid #d8dbe6;


			.menu-topic-view {
			
				display: inline-block;
				white-space: nowrap;
				height: 6.5vh;
				position: relative;
				margin-left: 35rpx;
			
				.menu-topic-text {
					font-size: 36rpx;
					color: #303133;
					padding: 25rpx 35rpx;
				}
			
				// .menu-topic-act {
				// 	margin-left: 30upx;
				// 	margin-right: 10upx;
				// 	position: relative;
				// 	height: 100%;
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: center;
				// }
			
				.menu-topic-bottom {
					position: absolute;
					bottom: 0;
					width: 100%;
			
					.menu-topic-bottom-color {
						width: 50rpx;
						height: 4rpx;
					}
				}
			
				.menu-topic-act .menu-topic-bottom {
			
					display: flex;
					justify-content: center;
				}
			
				.menu-topic-act .menu-topic-bottom-color {
					background: #FF8D1A;
				}
			
				.menu-topic-act .menu-topic-text {
					color: #FF8D1A;
				}
			}
		}

		.swiper-box-list {
			width: 100%;
			overflow-y: hidden;
			flex: 1;
			background-color: #E5E5E5;
			height: 93.5vh;
			.swiper-topic-list {
				width: 100%;
				overflow-y: scroll;

				.swiper-item {
					overflow-y: hidden;

					.posts-container {

						width: 100%;
						overflow-y: hidden;
						height: 87vh;
						padding-bottom: 100rpx;
						.title2 {
							margin: 0 2vw;
							padding: 0.5vh 0;
							font-size: 4vw;
							text-align: center;
							background-color: #F4F4F5;
							color: #9C9C9C;
							box-sizing: border-box;
							background-color: transparent;
							height: 80vh;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.post {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-top: 10px;
							
							.main {
								display: flex;
								height: 350rpx;
								width: 710rpx;
								border-radius: 50rpx;
								background: linear-gradient(to bottom, white, #E5E5E5);
								margin: 0 30rpx 0 30rpx;
								box-shadow: -5rpx -5rpx 30rpx 1rpx rgba(0, 0, 0, 0.1);								.img {
									flex: 9;
									background-color: white;
									margin: 20rpx 0 20rpx 20rpx;
									border-radius: 30rpx;
									
									image {
										height: 100%;
										width: 100%;
										border-radius: 30rpx;
									}
								}

								.contents {
									flex: 11;
									margin: 20rpx;
									display: flex;
									flex-direction: column;

									.contents-text {
										flex: 1;
										font-size: 30rpx;
										max-height: 14vh;
										overflow: hidden;
										text-overflow: ellipsis;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 5;
										/* 根据需要调整行数 */
									}

									.shop {
										background-color: #E5E5E5;
										border-radius: 20rpx;
										display: flex;
										justify-content: center;
										align-items: center;
										height: 6vh;
										margin-top: auto;

										.img {
											flex: 4;
											height: 95%;
											display: flex;
											justify-content: flex-start;
											align-items: center;
											background-color: transparent;
											margin: 0;
											padding-left: 10rpx;
											border-radius: 10rpx;
											image {
												width: 90%;
												height: 90%;
												border-radius: 15rpx;
											}
										}

										.shop-text {
											flex: 9;
											display: flex;
											flex-direction: column;

											.tag-rate {
												display: flex;

												.tag {
													background-color: #A6A6A6;
													width: 60rpx;
													color: #E3E3E3;
													font-size: 25rpx;
													display: flex;
													justify-content: center;
													align-items: center;
													border-radius: 10rpx;
												}

												.rate {
													margin: 0 1vw;
												}
											}

											.shop-name {
												font-size: 30rpx;
											}
										}
									}
								}
							}

							.poster {
								width: 95%;
								height: 100rpx;
								display: flex;

								.poster-img {
									width: 20%;
									background-color: transparent;
									display: flex;
									justify-content: center;
									align-items: center;
									border-radius: 50%;
									image {
										width: 11vw;
										height: 11vw;
										border-radius: 50%;
									}
								}

								.post-message {
									width: 50%;
									background-color: transparent;
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: flex-start;

									.poster-name {
										height: 55rpx;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
										max-width: 220rpx;
										display: inline-block;
										padding-top: 10rpx;
										font-size: 30rpx;
									}

									.time {
										height: 45rpx;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
										display: inline-block;
										max-width: 250rpx;
										font-size: 23rpx;
										color: #9C9C9C;
										justify-content: center;
										align-items: center;
										padding-bottom: 20rpx;
									}
								}

								.comment {
									width: 20%;
									display: flex;
									justify-content: center;
									align-items: center;

									.comment-img {
										margin: 0;
										padding: 0;
										margin-left: 10rpx;
										width: 50rpx;
										padding-top: 10rpx;
										
										image {
											width: 5.5vw;
											height: 5vw;
											
										}
									}

									.comment-text {
										width: 100rpx;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										max-width: 100rpx;
										display: inline-block;
										justify-content: flex-end;
										align-items: flex-end;

									}
								}

								.like {

									display: flex;
									justify-content: center;
									align-items: center;
									padding-right: 10rpx;

									.like-img {
										margin: 0;
										padding: 0;
										margin-left: 10rpx;
										width: 50rpx;
										padding-top: 10rpx;

										image {
											width: 5vw;
											height: 5vw;
										}
									}

									.like-text {
										width: 100rpx;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
										max-width: 100rpx;
										display: inline-block;
										justify-content: flex-start;
										align-items: flex-start;
									}
								}

								.others {

									display: flex;
									justify-content: center;
									align-items: center;
									padding-left: 10rpx;
									padding-bottom: 10rpx;

									.others-img {
										width: 100%;

										image {
											height: 1vw;
											width: 5vw;
										}
									}
								}
							}
						}

					}

					.title2 {
						margin: 0 2vw;
						padding: 0.5vh 0;
						font-size: 3vw;
						text-align: center;
						background-color: #F4F4F5;
						color: #9C9C9C;
						box-sizing: border-box;
						background-color: transparent;
					}
				}
			}
		}

	}




	.page {
		width: 750rpx;
		height: 108rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.page view {
		height: 108rpx;
		width: 50%;
		float: left;
		font-size: 29rpx;
		color: #333;
		text-align: center;
		line-height: 108rpx;
	}

	.page .prev {
		border-right: 1px solid #D9D9D9;
	}

	.page .disabled {
		color: #ccc;
	}


	.search-container {
		width: 680rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 7rpx 10rpx;
		border-radius: 18rpx;
		background-color: #F7F7F7;
		margin: 20rpx 25rpx 10rpx 25rpx;
		height: 50rpx;
		border-radius: 20px;
	}




	.search-input {
		flex: 1;
		height: 30rpx;
		padding: 0 10rpx;
		border: none;
		border-radius: 18rpx;
		outline: none;
		background-color: #F7F7F7;
		font-size: 30rpx;
	}

	.search-logo-container {
		background-color: #EB893E;
		height: 40rpx;
		width: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}

	.search-logo {
		height: 80%;
		width: 80%;
	}



	.el-tabs {}

	/* 设置滑块颜色 */
	::v-deep .el-tabs__active-bar {
		background-color: #FF8D1A !important;
	}

	/* 设置滑块停止位置 */
	::v-deep .el-tabs__active-bar.is-top {}

	/* 设置当前选中样式 */
	::v-deep .el-tabs__item.is-active {
		color: #FF8D1A !important;
		font-size: 4vw !important;
	}

	/* 设置未被选中样式 */
	::v-deep .el-tabs__item {
		color: #000000 !important;
		font-size: 4vw !important;
	}
=======
<template>
	<view class="forum-container" style="overflow: hidden;;">

		<scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
			<view class="menu-topic-view" v-for="item in tabs" :id="'tabNum'+item.id" :key="(item.id - 1)"
				@click="swichMenu(item.id - 1)">
				<view :class="currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
					<text class="menu-topic-text">{{item.name}}</text>
					<view class="menu-topic-bottom">
						<view class="menu-topic-bottom-color"></view>
					</view>
				</view>
			</view>
		</scroll-view>

		<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
			<swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
				<scroll-view class="swiper-item" scroll-y :scroll-top="scrollTop">

					<scroll-view scroll-y class="posts-container" v-show="currentTab===0"
						@scrolltolower="onScrolltolower">
						<view style="height:80vh;">
							<div class="post" v-for="(item,index) in FuckData.slice(0, 10+endIndex)">

								<div class="main" @click="goDetails(item.id)">
									<div class="img">
										<image :src="item.pictureUrl1" alt="" mode="aspectFill" />
									</div>
									<div class="contents">
										<div class="contents-text">{{item.content}}</div>
										<div class="shop">
											<div class="img">
												<image :src="item.dish.image" alt="" />
											</div>
											<div class="shop-text">
												<div class="tag-rate">
													<div class="tag"> 菜品</div>
													<uni-rate v-model="item.dish.stars" @change="onChange" size=5vw
														class="rate" allowHalf active-color="#FF8D1A" readonly />
												</div>
												<div class="shop-name">{{item.dish.name}}</div>
											</div>
										</div>
									</div>
								</div>

								<div class="poster">
									<div class="poster-img">
										<image :src="item.user.avatar" alt="" />
									</div>

									<div class="post-message">
										<div class="poster-name">{{item.user.userName}}</div>
										<div class="time">{{item.createTime}}</div>
									</div>

									<div class="like">
										<div class="like-img">
											<image v-if="!item.liked" :src="likeImage1" alt="" @click="like(item)" />
											<image v-else="item.liked" :src="likeImage2" alt="" @click="like(item)" />
											<!-- <image src="../../static/chishenme/like.png" alt="" /> -->

										</div>
										<div class="like-text">{{item.likes}}</div>
									</div>

									<div class="comment">
										<div class="comment-img">
											<image src="../../static/chishenme/comment.png" alt="" />
										</div>
										<div class="comment-text">{{item.commentCount}}</div>
									</div>



									<div class="others">
										<div class="others-img">
											<image src="../../static/chishenme/others.png" alt="" />
										</div>
									</div>

								</div>

							</div>
							<div class="title2" v-if="FuckData.length==0">空空如也</div>
						</view>


					</scroll-view>






					<scroll-view scroll-y class="posts-container" v-show="currentTab===1"
						@scrolltolower="onScrolltolower">
						<view style="height:90vh;">
							<div class="post" v-for="(item,index) in Data.slice(0, 10+endIndex)">

								<div class="main" @click="goDetails(item.id)">
									<div class="img">
										<image :src="item.pictureUrl1" alt="" mode="aspectFill" />
									</div>
									<div class="contents">
										<div class="contents-text">{{item.content}}</div>
										<div class="shop">
											<div class="img">
												<image :src="item.dish.image" alt="" />
											</div>
											<div class="shop-text">
												<div class="tag-rate">
													<div class="tag"> 菜品</div>
													<uni-rate v-model="item.dish.stars" @change="onChange" size=5vw
														class="rate" allowHalf active-color="#FF8D1A" readonly />
												</div>
												<div class="shop-name">{{item.dish.name}}</div>
											</div>
										</div>
									</div>
								</div>

								<div class="poster">
									<div class="poster-img">
										<image :src="item.user.avatar" alt="" />
									</div>

									<div class="post-message">
										<div class="poster-name">{{item.user.userName}}</div>
										<div class="time">{{item.createTime}}</div>
									</div>

									<div class="like">
										<div class="like-img">
											<image v-if="!item.liked" :src="likeImage1" alt="" @click="like(item)" />
											<image v-else="item.liked" :src="likeImage2" alt="" @click="like(item)" />
											<!-- <image src="../../static/chishenme/like.png" alt="" /> -->

										</div>
										<div class="like-text">{{item.likes}}</div>
									</div>

									<div class="comment">
										<div class="comment-img">
											<image src="../../static/chishenme/comment.png" alt="" />
										</div>
										<div class="comment-text">{{item.commentCount}}</div>
									</div>



									<div class="others">
										<div class="others-img">
											<image src="../../static/chishenme/others.png" alt="" />
										</div>
									</div>

								</div>

							</div>
						</view>


					</scroll-view>
					<!-- <div class="title2">已加载全部内容</div> -->


				</scroll-view>
			</swiper-item>
		</swiper>




	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				pageCount: 1,
				refresherTriggered: false,
				pullingDistance: 0,
				resetting: false,
				dataList: [],
				idImgUrlMap: {},
				endIndex: 0,
				defaultAvatar: "../../static/chishenme/morentouxiang.jpg",
				page: 1,
				size: 10,
				count: 0,
				scrollTop: 50,
				showPage: false,
				value: 1,
				activeName: 'second',
				likeImage1: "../../static/chishenme/like.png",
				likeImage2: "../../static/chishenme/afterLike.png",
				swiperOption: {
					// some swiper options/callbacks
					// 所有的参数同 swiper 官方 api 参数
					// ...
				},
				followers: [{
					id: 2,
					userName: "李四",
				}],
				tabs: [{
						id: 1,
						name: '关注'
					},
					{
						id: 2,
						name: '广场'
					},
				],
				currentTab: 1,
				tabCurrent: 'tabNum2',
				// Tab切换内容
				swiperDateList: [{
						id: 1,
						content: '推荐'
					},
					{
						id: 2,
						content: '交通交通'
					},
				],
				Data: [{
					liked: false,
					id: 3,
					userId: 2,
					content: "美味小厨不错",
					pictureUrl1: "",
					likes: 0,
					restaurant: {
						restaurantId: 1,
						name: "美味小厨",
						picUrl: "https://img.zcool.cn/community/019a975cda9a6fa801208f8bf0a069.png@1280w_1l_2o_100sh.png",
						score: 8.5
					},
					dish: {
						id: 2,
						name: "孜然羊肉",
						price: 9,
						stars: 4,
						navigationUrl: "url2",
						restaurantId: 1,
						image: "https://materials.cdn.bcebos.com/images/17521900/0e57e629c85a7df8cb6ede169146f834.jpeg",
						description: "肉香四溢",
					},
					user: {
						id: 2,
						userName: "李四",
						password: "234",
						phone: "25812314725",
						gender: false,
					},
					createTime: "2024-05-08T05:16:45.000+00:00",
					updateTime: "2024-05-08T05:17:37.000+00:00",
				}],
				FuckData: []


			}
		},
		computed: {
			swiper() {
				return this.$refs.mySwiper.swiper
			},
			state() {
				if (this.resetting) {
					return "—— 已加载全部内容 ——"
				}
				if (this.refresherTriggered) {
					return "正在加载...."
				}
				if (this.pullingDistance > 45) {
					return "正在加载...."
				} else {
					return "—— 已加载全部内容 ——"
				}
			}
		},
		methods: {
			onScrolltolower() {
				this.endIndex += 10;
				console.log(5555555555555555)
			},
			formatDate(dateString) {
				const date = new Date(dateString);

				const year = date.getFullYear();
				const month = ("0" + (date.getMonth() + 1)).slice(-2);
				const day = ("0" + date.getDate()).slice(-2);
				const hours = ("0" + date.getHours()).slice(-2);
				const minutes = ("0" + date.getMinutes()).slice(-2);
				const seconds = ("0" + date.getSeconds()).slice(-2);

				const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

				return formattedDate;
			},
			fetchData(id) {
				uni.request({
					url: "http://8.138.90.16:8080/posting/getSeveral?nowCount=" + id,
					method: 'GET',
					success: (res) => {
						const userInfo = uni.getStorageSync('userInfo');
						// if(id==1){
						this.Data = res.data.data;
						// }else if(id>1){
						//    this.Data.push(...res.data.data);
						// }


						//console.log(id)
						this.Data = this.Data.map((item) => {
							if (item.pictureUrl1) {
								this.getImg(item, item.pictureUrl1, 1);
							}
							if (item.user.avatar) {
								this.getImg(item, item.user.avatar, 2);
							}
							if (!item.user.avatar) {
								item.user.avatar = this.defaultAvatar;
							}
							if (!item.pictureUrl1) {
								item.pictureUrl1 = item.dish.image;
							}
							item.createTime = this.formatDate(item.createTime);

							item.likeUser.forEach((item2) => {
								if (item2 === userInfo.data.id) {
									item.liked = true;
								}
							});
							if (item.userId) {
								const followerIds = this.followers.map((follower) => follower.id);
								if (followerIds.includes(item.userId)) {
									this.FuckData.push(item);
								}
							}
							return item;
						});
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			like(item) {

				const userInfo = uni.getStorageSync('userInfo');

				if (item.liked) { //取消点赞
					uni.request({
						url: 'http://8.138.90.16:8080/posting/' + item.id + '/deleteLike?userId=' + userInfo.data
							.id,
						method: 'POST',
						data: {},
						success: function(res) {},
						fail: function(err) {
							// 处理失败情况
							console.error(err);
							// 其他操作...
						}
					});
					item.liked = false;
					item.likes--;
				} else {
					uni.request({ //点赞
						url: 'http://8.138.90.16:8080/posting/' + item.id + '/like?userId=' + userInfo.data.id,
						method: 'POST',
						data: {},
						success: function(res) {},
						fail: function(err) {
							// 处理失败情况
							console.error(err);
							// 其他操作...
						}
					});
					item.liked = true;
					item.likes++;
				}
			},
			goDetails(id) {
				uni.navigateTo({
					url: '../postDetail/postDetail?id=' + id + ''
				})

			},
			swichMenu(id) {
				this.currentTab = id
				this.tabCurrent = 'tabNum' + id
				this.getFollowData(100);
				// console.log(this.currentTab)
			},
			swiperChange(e) {
				let index = e.detail.current
				this.swichMenu(index)

			},
			getLikesData(item) {

				const url = 'http://8.138.90.16:8080/posting/' + item.id + '/getAllPostingLiker';
				const userInfo = uni.getStorageSync('userInfo');
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						const likedObj = res.data.data.find(obj => obj.id === userInfo.data.id);
						if (likedObj) {
							item.liked = true;
						} else {
							item.liked = false;
						}
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			getFollowData(index) {
				const userInfo = uni.getStorageSync('userInfo');
				const url = 'http://8.138.90.16:8080/user/' + userInfo.data.id + '/followers';
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						if (res.data.msg == "服务器内部错误") {
							this.followers = [];
							this.fetchData(index)
							return
						}
						this.FuckData = [];
						this.followers = res.data.data;
						this.fetchData(index)
						// console.log("this.followers")
						// console.log(this.followers)
						// for (let i = 0; i < this.followers.length; i++) {
						// 	this.getAllFollowerPost(i);
						// }

					},
					fail: (err) => {
						console.error(err);
					}
				});

				// /posting/{userId}/getPostingsByUserId
			},
			getAllFollowerPost(index) {
				if (this.followers[index]) {
					uni.request({
						url: 'http://8.138.90.16:8080/posting/' + this.followers[index].id +
							'/getPostingsByUserId',
						method: 'GET',
						success: (res) => {
							for (let i = 0; i < res.data.data.length; i++) {
								this.FuckData.push(res.data.data[i])
							}
							const userInfo = uni.getStorageSync('userInfo');
							this.FuckData = this.FuckData.map((item) => {

								if (!item.user.avatar) {
									item.user.avatar = this.defaultAvatar;
								}
								if (item.pictureUrl1) {
									//console.log(555555555555555555);

									for (const id in this.idImgUrlMap) {
										if (id === item.pictureUrl1) {
											item.pictureUrl1 = this.idImgUrlMap[id];
											//console.log(item.pictureUrl1);
											break; // Stop iterating once a match is found
										}
									}

								}
								if (!item.pictureUrl1) {
									item.pictureUrl1 = item.dish.image;
								}

								item.createTime = this.formatDate(item.createTime);

								const likedUserIds = item.likeUser.map(item2 => item2 === userInfo.data
									.id);
								const liked = likedUserIds.includes(true);

								return {
									...item,
									liked
								};
							}).reverse();
							//console.log(this.FuckData)
						},
						fail: (err) => {
							console.error(err);
						}
					});
				}

			},
			getImg(item,id,index){
				 if (this.idImgUrlMap[id]) {
				      const imgUrl = this.idImgUrlMap[id];
				      if (index == 1) {
				        item.pictureUrl1 = imgUrl;
				      } else if (index == 2) {
				        item.user.avatar = imgUrl;
				      }
				      return imgUrl;
				    }
				uni.request({          //获取图片
					url: 'http://8.138.90.16:8080/image/getImage?id='+id,
					method: 'GET',
					success: res1 => {
							// console.log("根据文件地址获得的base64编码图片"); 
	
							// 将base64字符串转换为ArrayBuffer格式
					
							// const arrayBuffer = uni.base64ToArrayBuffer(res1.data.data.data);
							// // 将ArrayBuffer转换为Blob对象
							// const blob = new Blob([arrayBuffer], { type: 'image/png' });
							// // 创建Blob URL
							// const imgUrl = URL.createObjectURL(blob);
							const base64Data = res1.data.data.data;
							// 直接设置图片 src 属性
							const imgUrl = `data:image/png;base64,${base64Data}`;
							
							
							this.idImgUrlMap[id] = imgUrl;
							if(index==1){
								item.pictureUrl1=imgUrl;
							}else if(index==2){
								item.user.avatar=imgUrl
							}
							
							//console.log(this.idImgUrlMap)
							return imgUrl;
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
	

		},
		onLoad() {
			this.pageCount = 0;
			// this.fetchData();
			// this.getFollowData();
			// // 创建一个包装请求的函数，返回一个Promise


		},
		onReachBottom() {
			this.startIndex += 10;
			// this.pageCount++;

			// this.getFollowData(this.pageCount);
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
			this.getFollowData(100);

		},
		onShow() {
			this.getFollowData(100);
		},

	}
</script>

<style lang="scss" scoped>
	page,
	.forum-container {
		overflow-y: scroll;
		height: 100vh;
		width: 100%;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		background: #E5E5E5;

		.top-menu-view {
			overflow-y: scroll;
			display: flex;
			white-space: nowrap;
			width: 100%;
			background-color: #FFFFFF;
			height: 7vh;
			line-height: 86rpx;
			padding-top: 3vh;
			border-bottom: 1rpx solid #d8dbe6;

			.menu-topic-view {
				display: inline-block;
				white-space: nowrap;
				height: 6vh;
				position: relative;
				overflow-y: scroll;

				.menu-topic-text {
					font-size: 30rpx;
					color: #303133;
					padding: 10rpx 40rpx;
				}

				// .menu-topic-act {
				// 	margin-left: 30upx;
				// 	margin-right: 10upx;
				// 	position: relative;
				// 	height: 100%;
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: center;
				// }

				.menu-topic-bottom {
					position: absolute;
					bottom: 0;
					width: 100%;

					.menu-topic-bottom-color {
						width: 60rpx;
						height: 5rpx;
					}
				}

				.menu-topic-act .menu-topic-bottom {
					display: flex;
					justify-content: center;
				}

				.menu-topic-act .menu-topic-bottom-color {
					background: #FF8D1A;
				}
			}
		}

		.swiper-box-list {
			width: 100%;
			overflow-y: scroll;
			flex: 1;
			background-color: #E5E5E5;
			height: 95vh;

			.swiper-topic-list {
				width: 100%;
				overflow-y: scroll;

				.swiper-item {
					overflow-y: scroll;

					.posts-container {

						width: 100%;
						overflow-y: scroll;
						height: 90vh;

						.title2 {
							margin: 0 2vw;
							padding: 0.5vh 0;
							font-size: 4vw;
							text-align: center;
							background-color: #F4F4F5;
							color: #9C9C9C;
							box-sizing: border-box;
							background-color: transparent;
							height: 80vh;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.post {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-bottom: 10px;

							.main {
								display: flex;
								height: 350rpx;
								width: 730rpx;
								border-radius: 50rpx;
								background: linear-gradient(to bottom, white, #E5E5E5);
								margin: 0rpx 30rpx 0 30rpx;

								.img {
									flex: 9;
									background-color: white;
									margin: 20rpx 0 20rpx 20rpx;
									border-radius: 30rpx;

									image {
										height: 100%;
										width: 100%;
									}
								}

								.contents {
									flex: 11;
									margin: 20rpx;
									display: flex;
									flex-direction: column;

									.contents-text {
										flex: 1;
										font-size: 30rpx;
										max-height: 14vh;
										overflow: hidden;
										text-overflow: ellipsis;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 5;
										/* 根据需要调整行数 */
									}

									.shop {
										background-color: #E5E5E5;
										border-radius: 20rpx;
										display: flex;
										justify-content: center;
										align-items: center;
										height: 6vh;
										margin-top: auto;

										.img {
											flex: 4;
											height: 95%;
											display: flex;
											justify-content: flex-start;
											align-items: center;
											background-color: transparent;
											margin: 0;
											padding-left: 10rpx;

											image {
												width: 90%;
												height: 90%;
											}
										}

										.shop-text {
											flex: 9;
											display: flex;
											flex-direction: column;

											.tag-rate {
												display: flex;

												.tag {
													background-color: #A6A6A6;
													width: 60rpx;
													color: #E3E3E3;
													font-size: 25rpx;
													display: flex;
													justify-content: center;
													align-items: center;
													border-radius: 10rpx;
												}

												.rate {
													margin: 0 1vw;
												}
											}

											.shop-name {
												font-size: 30rpx;
											}
										}
									}
								}
							}

							.poster {
								width: 95%;
								height: 100rpx;
								display: flex;

								.poster-img {
									width: 20%;
									background-color: transparent;
									display: flex;
									justify-content: center;
									align-items: center;

									image {
										width: 11vw;
										height: 11vw;
										border-radius: 50%;
									}
								}

								.post-message {
									width: 50%;
									background-color: transparent;
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: flex-start;

									.poster-name {
										height: 55rpx;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
										max-width: 220rpx;
										display: inline-block;
										padding-top: 10rpx;
										font-size: 30rpx;
									}

									.time {
										height: 45rpx;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
										display: inline-block;
										max-width: 250rpx;
										font-size: 23rpx;
										color: #9C9C9C;
										justify-content: center;
										align-items: center;
										padding-bottom: 20rpx;
									}
								}

								.comment {
									width: 20%;
									display: flex;
									justify-content: center;
									align-items: center;

									.comment-img {
										margin: 0;
										padding: 0;
										margin-left: 10rpx;
										width: 50rpx;
										padding-top: 10rpx;

										image {
											width: 5vw;
											height: 5vw;
										}
									}

									.comment-text {
										width: 100rpx;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										max-width: 100rpx;
										display: inline-block;
										justify-content: flex-end;
										align-items: flex-end;

									}
								}

								.like {

									display: flex;
									justify-content: center;
									align-items: center;
									padding-right: 10rpx;

									.like-img {
										margin: 0;
										padding: 0;
										margin-left: 10rpx;
										width: 50rpx;
										padding-top: 10rpx;

										image {
											width: 5vw;
											height: 5vw;
										}
									}

									.like-text {
										width: 100rpx;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
										max-width: 100rpx;
										display: inline-block;
										justify-content: flex-start;
										align-items: flex-start;
									}
								}

								.others {

									display: flex;
									justify-content: center;
									align-items: center;
									padding-left: 10rpx;
									padding-bottom: 10rpx;

									.others-img {
										width: 100%;

										image {
											height: 1vw;
											width: 5vw;
										}
									}
								}
							}
						}

					}

					.title2 {
						margin: 0 2vw;
						padding: 0.5vh 0;
						font-size: 3vw;
						text-align: center;
						background-color: #F4F4F5;
						color: #9C9C9C;
						box-sizing: border-box;
						background-color: transparent;
					}
				}
			}
		}

	}




	.page {
		width: 750rpx;
		height: 108rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.page view {
		height: 108rpx;
		width: 50%;
		float: left;
		font-size: 29rpx;
		color: #333;
		text-align: center;
		line-height: 108rpx;
	}

	.page .prev {
		border-right: 1px solid #D9D9D9;
	}

	.page .disabled {
		color: #ccc;
	}


	.search-container {
		width: 680rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 7rpx 10rpx;
		border-radius: 18rpx;
		background-color: #F7F7F7;
		margin: 20rpx 25rpx 10rpx 25rpx;
		height: 50rpx;
		border-radius: 20px;
	}




	.search-input {
		flex: 1;
		height: 30rpx;
		padding: 0 10rpx;
		border: none;
		border-radius: 18rpx;
		outline: none;
		background-color: #F7F7F7;
		font-size: 30rpx;
	}

	.search-logo-container {
		background-color: #EB893E;
		height: 40rpx;
		width: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}

	.search-logo {
		height: 80%;
		width: 80%;
	}



	.el-tabs {}

	/* 设置滑块颜色 */
	::v-deep .el-tabs__active-bar {
		background-color: #FF8D1A !important;
	}

	/* 设置滑块停止位置 */
	::v-deep .el-tabs__active-bar.is-top {}

	/* 设置当前选中样式 */
	::v-deep .el-tabs__item.is-active {
		color: #FF8D1A !important;
		font-size: 4vw !important;
	}

	/* 设置未被选中样式 */
	::v-deep .el-tabs__item {
		color: #000000 !important;
		font-size: 4vw !important;
	}
>>>>>>> cf370fbbdd0e2619b30401affbcab9dcb463763f
</style>